body, p, h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
}

[v-cloak] {
  display: none;
}
#app {
  width: 100%;
  // background-color: rgba(255, 229, 236, 1);
  background-image: './images/background.png';
  color: white;
  overflow: hidden;
  background-color: rgba(199, 123, 200, 1);
  .head-img {
    width:100%;
  }

  .banner-rule{
    width: 100%;
    margin-top: .8rem;
  } 
  .score-box{
    width:85.07%;
    height:4.693333rem;
    box-sizing: border-box;
    margin:  0 auto .64rem;
    // background:rgba(176,59,202,1);
    background-image: url('./images/2@2x.png');
    background-size: cover;
    border-radius:.4rem;
    .score1{
      width: 7.21%;
      height: .613333rem;
      position: relative;
      display: inline-block;
      margin-top: 3.28rem;
      margin-left: 22.88%;
      p{
        text-align: center;
        font-family:JZhongYi;
        color:rgba(255,255,255,1);
      }
    }
    .score2{
      width: 7.21%;
      height: .613333rem;
      position: relative;
      display: inline-block;
      margin-top: 3.28rem;
      margin-left: 36.87%;
      p{
        text-align: center;
        font-family:JZhongYi;
        color:rgba(255,255,255,1);
      }
    }
  }
  .banner-award{
    width: 100%;
    margin-top: .8rem;
    .award-box{
      width:85.07%;
      height:100%;
      box-sizing: border-box;
      margin:  0 auto .64rem;
      border-radius:.4rem;
    }
  }

  .banner-title{
    width: 100%;
    height: 11.013333rem;
    margin-top: 1.386667rem;
    .box-title{
      width:37.6%;
      height: 1.2rem;
      position: relative;
      top:-.613333rem;
      left:31.2%;
      border-radius:.6rem;
      background-color:rgba(255,241,57,1);
      color: red;
      z-index: 3;
      .title-text{
        width:70.92%;
        height:.613333rem;
        position: absolute;
        display: inline-block;
        top: 50%;
        margin-top: -0.4rem;
        margin-left: 14.89%;
        p{
          text-align: center;
          font-family:JZhongYi;
          color:rgba(243,97,84,1);
        }
      }
    }
  }

    .activity-box{
      width:85.07%;
      height:11.013333rem;
      box-sizing: border-box;
      margin:  0 auto .64rem;
      background:rgba(176,59,202,1);
      border-radius:.4rem;
      border:.08rem solid rgba(255,241,57,1);
      margin-top: -1.213333rem;
      overflow: scroll;
      overflow-x:hidden;
      // overflow-y:hidden;
      .box-tr{
        width: 100%;
        height: 1.066667rem;
        position: relative;
        display: flex;
        flex-direction:row;
        flex-wrap:nowrap;
        align-items:center;
        box-sizing: border-box;
        top: .533333rem;
        margin-top: .533333rem;
        .ranking3{
          width:6.27%;
          text-align: center;
          line-height: .426667rem;
          margin:8%;
          // background-color: rgba(199, 123, 200, 1);
        }
        .ranking-img{
          width: 10.41%;
          height: 0;
          padding-bottom: 10.41%;
          // margin: 1.6%;
          // margin-left:2.08rem;
          // margin-top: -0.4rem;
          // background-repeat:no-repeat;
          // background-attachment:fixed;
          background-position:center;
          background-size: cover;
          border-radius: 50%;
          overflow: hidden;
        }
        .border-1 {
          border: .013333rem solid #FFD600;
        }
  
        .border-2 {
          border: .013333rem solid #F9F9F9;
        }
  
        .border-3 {
          border: .013333rem solid #EB904B;
        }
  
        .ranking-1 {
          color: rgba(245, 166, 35, 1);
        }
  
        .ranking-2 {
          color: rgba(245, 166, 35, 1);
        }
  
        .ranking-3 {
          color: rgba(245, 166, 35, 1);
        }
        .nickname{
          // padding: .133333rem;
          width:20.69%;
          // text-align: center;
          position: relative;
          margin:7.6%;
          overflow: hidden;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          p{
            margin-top: .16rem;
            overflow: hidden;
            font-family:PingFangSC-Regular,PingFang SC;
            font-weight:400;
            color:rgba(255, 255, 255, 1);
          }
        }
        .item4{
          // padding: .133333rem;
          width:15.69%;
          // text-align: center;
          position: relative;
          margin:6.6%;
          overflow: hidden;
          text-align: center;
          p{
            margin-top: .16rem;
            overflow: hidden;
            font-family:PingFangSC-Regular,PingFang SC;
            font-weight:400;
            color:rgba(255, 255, 255, 1);
          }
        }
      }
    }

    .foot{
      position: relative;
      width: 70.93%;
      height: .426667rem;
      margin-top: .533333rem;
      left: 50%;
      margin-left: -35.46%;
      padding-bottom: .266667rem;
      p{
        text-align: center;
        color: rgba(238, 198, 247, 1);
      }
    }
    .overlay {
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      background-color: rgba(0, 0, 0, 0.7);
      // display: none;
      z-index: 100;
    }
    #over-dialog {
      position: fixed;
      top: 17.08%;
      left: 50%;
      margin-left: -4.133333rem;
    
      width: 8.266667rem;
      height: 6.586667rem;
      background-color: rgba(255, 255, 255, 1);
      border-radius: .266667rem;
      z-index: 101;
    
      >.close {
        position: absolute;
        top: 2.4%;
        right: 2.4%;
    
        width: .426667rem;
        height: .426667rem;
    
        background-image: url(../images/close2x.png);
        background-repeat: no-repeat;
        background-size: contain;
      }
      >p {
        text-align: center;
        font-weight: 500;
        color: black;
      }
      >p:nth-child(2) {
        margin-top: 1.733333rem;
      }
      .btn {
        width: 6.64rem;
        height: 1.333333rem;
        background:rgba(50,50,50,1);
        box-shadow: 0 0 .106667rem 0 rgba(0,0,0,0.36);
        border-radius: .666667rem;
        margin: 1.226667rem auto 1.173333rem;
      
        color:rgba(52,249,165,1);
        font-weight: 600;
        text-shadow: 0 0 .106667rem rgba(0, 0, 0, 0.36);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
}

[data-dpr="1"] {
  #app {
    font-size: 12px;
    line-height: 14px;
  }
  .desc-text p{
    font-size:14px;
    color:rgba(255,113,144,1);
    line-height:25px;
  }
  .list-btn p{
    font-size:16px;
    line-height:32px;
  }
  .nickname p{
    font-size:12px;
    overflow: hidden;
    line-height:12px;
  }
  .title-text p{
    font-size: 19px;
    line-height:23px;
  }
  .score-box p{
    font-size:20px;
    line-height:23px;
  }
  .item4 p{
    font-size:12px;
    line-height:12px;
  }
}

[data-dpr="2"] {
  #app {
    font-size: 24px;
    line-height: 28px;
  }
  .desc-text p{
    font-size:14px;
    color:rgba(255,113,144,1);
    line-height:25px;
  }
  .list-btn p{
    font-size:32px;
    line-height:64px;
  }
  .nickname p{
    font-size:24px;
    color:black;
    line-height:24px;
  }
  .title-text p{
    font-size: 38px;
    line-height:46px;
  }
  .score-box p{
    font-size:40px;
    line-height:46px;
  }
  .item4 p{
    font-size:24px;
    line-height:24px;
  }
}

[data-dpr="3"] {
  #app {
    font-size: 36px;
    line-height: 42px;
  }
  .desc-text p{
    font-size:14px;
    color:rgba(255,113,144,1);
    line-height:25px;
  }
  .list-btn p{
    font-size:48px;
    line-height:96px;
  }
  .nickname p{
    font-size:36px;
    color:black;
    line-height:36px;
  }
  .title-text p{
    font-size: 57px;
    line-height:69px;
  }
  .score-box p{
    font-size:60px;
    line-height:69px;
  }
  .item4 p{
    font-size:36px;
    line-height:36px;
  }
}